<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light!</title>
    <link rel="stylesheet" type="text/css" href="lib/webgl-tutorials.css">
   <style>
/*      body {
            margin: 0;
        }

        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }*/
       p {
           font-size: xx-small;
       }
    </style>
</head>
<body onload="main()">
    <canvas id="c" width="400" height="400"></canvas>
    <div style="position:fixed;top:10px;z-index: 99;left: 20px;color: #e2e2e2;font-family: Arial">
        <p >
            <div id="showfps" style="width: 70px;float: left"></div>
            <div id="showtime" style="width: 10px;float: left"></div>
        </p>
        <p id="showMouseXY"></p>
    </div>
    <div id="uiContainer">
        <div id="ui">
            <div id="u_ambientIntensity"></div>
            <div id="u_lightIntensity"></div>
            <div id="u_specularIntensity"></div>
            <div id="specularPowParam"></div>
            <div id="lightX"></div>
            <div id="lightY"></div>
            <div id="lightZ"></div>
        </div>
    </div>
</body>
<script type="notjs" id="vertext-shader-sc">
    attribute vec4 a_position;
    attribute vec4 a_normal;
    attribute vec4 a_color;

    uniform mat4 u_projMat;
    uniform mat4 u_viewMat;
    uniform mat4 u_modelMat;
    uniform mat4 u_normalMat;
    uniform vec3 u_eyePos;

    varying vec3 v_normal;
    varying vec4 v_color;
    varying vec3 v_eyePos;
    varying vec3 v_FragPos;

    void main(){
        gl_Position = u_projMat * u_viewMat * u_modelMat * a_position;
        v_normal =  vec3(normalize(u_normalMat * a_normal));
        v_color = a_color;
        v_eyePos = u_eyePos;
        v_FragPos = (u_modelMat * a_position).xyz;
    }
</script>
<script type="notjs" id="fragment-shader-sc">
    precision mediump float;

    //平行光
    struct DirLight{
        vec3 lightDir;//光源方向
        vec3 lightColor;//光源颜色
    };

    //点光
    struct PointLight{
        vec3 lightPosition;//点光源位置
        vec3 lightColor;//光源颜色
        float lightIntensity;//点光源光照强度
    };

    varying vec4 v_color;
    varying vec3 v_normal;
    varying vec3 v_eyePos;
    varying vec3 v_FragPos;
    uniform DirLight u_dirLight;
    uniform PointLight u_light;
    uniform vec3 u_ambientColor;//环境光颜色
    uniform float u_ambientIntensity;//环境光照强度
    uniform float u_specularIntensity;//镜面反射强度
    uniform float u_specularPowParam;//光泽度

    //计算光照信息
    vec3 getDirLightValue();
    vec3 getPointLightValue();
    vec3 getLightValue(vec3 lightDir, vec3 lightColor, vec3 normal, float coefficient);

    void main(){
        gl_FragColor = vec4(getDirLightValue() + getPointLightValue(), 1.0) * v_color;//+ getPointLightValue()
        //gl_FragColor = vec4(relectDir, 1.0) ;
    }

    vec3 getDirLightValue() {
        vec3 lightDir = normalize(u_dirLight.lightDir);
        vec3 normal = normalize(v_normal);
        return getLightValue(lightDir, u_dirLight.lightColor, normal, 1.0);
    }

   vec3 getPointLightValue() {
        //光照计算
        vec3 r= u_light.lightPosition - v_FragPos;
        //光线方向
        vec3 lightDir = normalize(r);
        //距离系数
        float distance = length(r);
        float coefficient = 1.0/(1.0 + (0.09 * distance) + pow((0.032 * distance), 2.0));
        //法向
        vec3 normal = normalize(v_normal);
        return getLightValue(lightDir, u_light.lightColor, normal, coefficient);
    }

    vec3 getLightValue(vec3 lightDir, vec3 lightColor, vec3 normal, float coefficient) {
        //ambient
        vec3 ambient = u_ambientIntensity *  u_ambientColor * v_color.rgb;
        //diffuse
        float nDol = max(dot(lightDir, normal), 0.0);
        vec3 diffuse =  coefficient * u_light.lightIntensity * lightColor * nDol;
        //specular
        vec3 eyeDir = normalize(v_eyePos - v_FragPos);
        vec3 relectDir = reflect(-lightDir, normal);//反射光反向
        float specVal = pow(max(dot(eyeDir, relectDir), 0.0), u_specularPowParam);
        vec3 specular = coefficient * u_specularIntensity * specVal * lightColor;

        return ambient + diffuse + specular;
    }
</script>
<script type="notjs" id="sun-vertext-shader-sc">
    attribute vec4 a_position;
    uniform mat4 u_mvpMatrix;
    void main(){
        gl_Position = u_mvpMatrix * a_position;
    }
</script>
<script type="notjs" id="sun-fragment-shader-sc">
    precision mediump float;

    uniform vec4 u_color;

    void main(){
        gl_FragColor = u_color;
    }
</script>
<script type="text/javascript" src="lib/webgl-utils.js"></script>
<script type="text/javascript" src="lib/m4.js"></script>
<script type='text/javascript' src="lib/webgl-lessons-ui.js"></script>
<script type="text/javascript">
    var modelRotation = [0.0, 0.0, 0.0];

    var cameraTranslation = [0.0, 2.8, 7.5];
    var cameraTarget = [0.0, 0.0, -1.0];
    var cameraUp = [0.0, 1.0, 0.0];

    var dirLightTranslation = [0.0, 0.0, 1.0];
    var dirLightColor = [1.0, 1.0, 1.0];
    var pointLightTranslation = [-2.0,9.0, -4.0];
    var pointLightColor = [1.0, 1.0, 1.0];
    var ambientColor = [0.2, 0.3, 0.3];
    var lightIntensity = 2.0;
    var specularIntensity = 2.8;
    var specularPowParam = 100.0;
    var ambientIntensity = 0.6;

    var cubeNum = 10;
    var more = 100;
    var randomTransltation = [];
    var randomRotator = [];
    var randomScalArr = [];

    function main(){
        var cavans = document.getElementById("c");
        var gl = cavans.getContext("webgl");

        var program = webglUtils.createProgramFromScripts(gl, ["vertext-shader-sc", "fragment-shader-sc"]);
        var a_position = gl.getAttribLocation(program, "a_position");
        var a_color = gl.getAttribLocation(program, "a_color");
        var a_normal = gl.getAttribLocation(program, "a_normal");
        var u_projMat = gl.getUniformLocation(program, "u_projMat");
        var u_viewMat = gl.getUniformLocation(program, "u_viewMat");
        var u_eyePos = gl.getUniformLocation(program, "u_eyePos");
        var u_modelMat = gl.getUniformLocation(program, "u_modelMat");
        var u_normalMat = gl.getUniformLocation(program, "u_normalMat");

        var u_dirLightDir = gl.getUniformLocation(program, "u_dirLight.lightDir");
        var u_dirLightColor = gl.getUniformLocation(program, "u_dirLight.lightColor");
        var u_lightPosition = gl.getUniformLocation(program, "u_light.lightPosition");
        var u_lightColor = gl.getUniformLocation(program, "u_light.lightColor");
        var u_lightIntensity = gl.getUniformLocation(program, "u_light.lightIntensity");
        var u_ambientColor = gl.getUniformLocation(program, "u_ambientColor");
        var u_ambientIntensity = gl.getUniformLocation(program, "u_ambientIntensity");
        var u_specularIntensity = gl.getUniformLocation(program, "u_specularIntensity");
        var u_specularPowParam = gl.getUniformLocation(program, "u_specularPowParam");


        var sunProgram = webglUtils.createProgramFromScripts(gl, ["sun-vertext-shader-sc", "sun-fragment-shader-sc"]);
        var sun_position = gl.getAttribLocation(sunProgram, "a_position");
        var sun_color = gl.getUniformLocation(sunProgram, "u_color");
        var sun_mvpMatrix = gl.getUniformLocation(sunProgram, "u_mvpMatrix");


        var vertextBuffer = gl.createBuffer();
        var numVertex = setGeometry();
        var colorBuffer = gl.createBuffer();
        setColor();
        var normalBuffer = gl.createBuffer();
        setNormal();

        setupUI();
        setupEvent();

        var deltaTime = 0.0;
        var lastTimestamp = 0.0;
        function anima(timestamp){
            return draw(timestamp);
        }

        for(var i = 0;i < cubeNum * more; i++){
            randomTransltation.push([Math.random() * 100.0 - 50.0, Math.random() * 100.0 - 10.0, Math.random() * 100.0 - 100.0]);
            randomRotator.push([Math.random() * 360.0, Math.random() * 360.0, Math.random() * 360.0])
            randomScalArr.push(Math.random() / 10.0 * 5.0);
        }

        function draw(timestamp){
            if(!lastTimestamp){
                lastTimestamp = timestamp;
            }
            deltaTime = timestamp - lastTimestamp;
            displayFPS(deltaTime);
            lastTimestamp = timestamp;
            webglUtils.resizeCanvasToDisplaySize(gl.canvas);
            gl.viewport(0, 0, gl.canvas.clientWidth, gl.canvas.clientHeight);
            //gl.clearColor(0.1, 0.1, 0.1, 1.0);
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            gl.enable(gl.DEPTH_TEST);
            gl.enable(gl.CULL_FACE);

            //先确定好投影和相机
            var projMat = m4.perspective(degToRad(60.0), gl.canvas.clientWidth / gl.canvas.clientHeight, 1, -20);
            var cameraMat = m4.lookAt(cameraTranslation,  m4.addVectors(cameraTranslation, cameraTarget), cameraUp);
            var viewMat = m4.inverse(cameraMat);

            //绘制点光灯
            gl.useProgram(sunProgram);
            gl.enableVertexAttribArray(sun_position);
            gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuffer);
            gl.vertexAttribPointer(sun_position, 3, gl.FLOAT, false, 0, 0);
            var modelWorldMatrix2 = m4.translate(m4.identity(), pointLightTranslation[0], pointLightTranslation[1], pointLightTranslation[2]);
            modelWorldMatrix2 = m4.scale(modelWorldMatrix2, 0.2, 0.2, 0.2);
            var mvpMatrix2 = m4.multiply(projMat, viewMat);
            mvpMatrix2 = m4.multiply(mvpMatrix2, modelWorldMatrix2);
            gl.uniformMatrix4fv(sun_mvpMatrix, false, mvpMatrix2);
            gl.uniform4f(sun_color, pointLightColor[0], pointLightColor[1], pointLightColor[2], 1.0);
            gl.drawArrays(gl.TRIANGLES, 0 , numVertex);

            gl.useProgram(program);
            gl.enableVertexAttribArray(a_position);
            gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuffer);
            gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(a_color);
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.vertexAttribPointer(a_color, 3, gl.UNSIGNED_BYTE, true, 0, 0);
            gl.enableVertexAttribArray(a_normal);
            gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
            gl.vertexAttribPointer(a_normal, 3, gl.FLOAT, true, 0, 0);


            //灯光
            gl.uniform3fv(u_dirLightDir, dirLightTranslation);
            gl.uniform3fv(u_dirLightColor, dirLightColor);
            gl.uniform3fv(u_lightPosition, pointLightTranslation);
            gl.uniform3fv(u_lightColor, pointLightColor);
            gl.uniform3fv(u_ambientColor, ambientColor);
            gl.uniform1f(u_lightIntensity, lightIntensity);
            gl.uniform1f(u_specularIntensity, specularIntensity);
            gl.uniform1f(u_ambientIntensity, ambientIntensity);
            gl.uniform1f(u_specularPowParam, specularPowParam);


            //一堆立方体来临
            var modelMat = m4.translate(m4.identity(), 0, 0, -40.0);
            modelMat = m4.scale(modelMat, 5, 0.5, 100.0);
            modelMat = m4.yRotate(modelMat, degToRad(modelRotation[1]))
            var normalMat = m4.inverse(modelMat);
            m4.transpose(normalMat, normalMat);
            gl.uniform3fv(u_eyePos, cameraTranslation);
            gl.uniformMatrix4fv(u_projMat, false, projMat);
            gl.uniformMatrix4fv(u_viewMat, false, viewMat);
            gl.uniformMatrix4fv(u_modelMat, false, modelMat);
            gl.uniformMatrix4fv(u_normalMat, false, normalMat);
            gl.drawArrays(gl.TRIANGLES, 0 , numVertex);

            var angle = 0.0;
            for(var i = 0; i < cubeNum; i++){
                modelMat = m4.translate(m4.identity(), Math.cos(degToRad(angle)) * 5.0 * Math.sin(timestamp * 0.001), Math.sin(degToRad(angle)) * 5.0 * Math.sin(timestamp  * 0.001) + 3.0, 0.0);
                modelMat = m4.xRotate(modelMat, degToRad((Math.cos(timestamp * 0.001) + 1.0) * 360.0));
                modelMat = m4.scale(modelMat, 0.5, 0.5, 0.5);
                normalMat = m4.inverse(modelMat);
                m4.transpose(normalMat, normalMat);
                gl.uniformMatrix4fv(u_modelMat, false, modelMat);
                gl.uniformMatrix4fv(u_normalMat, false, normalMat);
                gl.drawArrays(gl.TRIANGLES, 0 , numVertex);
                angle += 360.0 / cubeNum;
            }

            var angle = 0.0;
            for(var i = 0; i < cubeNum * more; i++){
                modelMat = m4.translate(m4.identity(), randomTransltation[i][0], randomTransltation[i][1], randomTransltation[i][2]);
                modelMat = m4.scale(modelMat, randomScalArr[i], randomScalArr[i], randomScalArr[i]);
                modelMat = m4.xRotate(modelMat, randomRotator[i][0]);
                modelMat = m4.yRotate(modelMat, randomRotator[i][1]);
                modelMat = m4.zRotate(modelMat, randomRotator[i][2]);
                normalMat = m4.inverse(modelMat);
                m4.transpose(normalMat, normalMat);
                gl.uniformMatrix4fv(u_modelMat, false, modelMat);
                gl.uniformMatrix4fv(u_normalMat, false, normalMat);
                gl.drawArrays(gl.TRIANGLES, 0 , numVertex);
                angle += 10.0;
                angle = 360.0 % angle;
            }

            requestAnimationFrame(draw);
        }

        requestAnimationFrame(anima);


        var lastShowTime = 0;
        function displayFPS(deltaTime){
            if(deltaTime < 2.0 || lastShowTime < 50){
                lastShowTime += deltaTime;
                return;
            }
            //FPS
            var fps = Math.floor(1000.0 / deltaTime);
            document.getElementById("showfps").innerText  =  fps;//"FPS:" +
            //document.getElementById("showtime").innerText  = Math.round(deltaTime) + "ms";
            lastShowTime = 0;
        }

        function setGeometry(){
            //    v6----- v5
            //   /|      /|
            //  v1------v0|
            //  | |     | |
            //  | |v7---|-|v4
            //  |/      |/
            //  v2------v3
            var positions = [
                // v0-v1-v2-v3 front
                0.5, 0.5, 0.5,//0
                -0.5,0.5,0.5,//1
                -0.5,-0.5,0.5,//2
                0.5,0.5,0.5,//0
                -0.5,-0.5,0.5,//2
                0.5,-0.5,0.5,//3

                // v0-v3-v4-v5 right
                0.5, 0.5, 0.5,//0
                0.5,-0.5,0.5,//3
                0.5, -0.5, -0.5,//4
                0.5, 0.5, 0.5,//0
                0.5,-0.5,-0.5,//4
                0.5,0.5,-0.5,//5

                // v0-v5-v6-v1 up
                0.5, 0.5, 0.5,//0
                0.5,0.5,-0.5,//5
                -0.5,0.5,-0.5,//6
                0.5, 0.5, 0.5,//0
                -0.5,0.5,-0.5,//6
                -0.5,0.5,0.5,//1

                // v1-v6-v7-v2 left
                -0.5, 0.5, 0.5,//1
                -0.5, 0.5, -0.5,//6
                -0.5,-0.5, -0.5,//7
                -0.5, 0.5, 0.5,//1
                -0.5,-0.5, -0.5,//7
                -0.5,-0.5,0.5,//2

                // v7-v4-v3-v2 bottom
                -0.5,-0.5,-0.5,//7
                0.5,-0.5,-0.5,//4
                0.5,-0.5,0.5,//3
                -0.5,-0.5,-0.5,//7
                0.5,-0.5,0.5,//3
                -0.5,-0.5,0.5,//2

                // v4-v7-v6-v5 back
                0.5,-0.5,-0.5,//4
                -0.5,-0.5,-0.5,//7
                -0.5, 0.5, -0.5,//6
                0.5,-0.5,-0.5,//4
                -0.5, 0.5, -0.5,//6
                0.5,0.5,-0.5,//5
            ];
            gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
            return positions.length / 3;
        }

        function setColor(){
            var colors = [
                // front
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,


                // right
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,

                // top
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,

                //left
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,

                //bottom
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,

                //back
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
                95, 158, 160,
            ];

            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(colors), gl.STATIC_DRAW);
        }

        function setNormal(){
            var normals = [
                // v0-v1-v2-v3 front
                0, 0, 1,//0
                0, 0, 1,//1
                0, 0, 1,//2
                0, 0, 1,//0
                0, 0, 1,//2
                0, 0, 1,//3

                // v0-v3-v4-v5 right
                1, 0, 0,//0
                1, 0, 0,//5
                1, 0, 0,//6
                1, 0, 0,//0
                1, 0, 0,//6
                1, 0, 0,//1

                // v0-v5-v6-v1 up
                0, 1, 0,//0
                0, 1, 0,//3
                0, 1, 0,//4
                0, 1, 0,//0
                0, 1, 0,//4
                0, 1, 0,//5

                // v1-v6-v7-v2 left
                -1, 0, 0,//7
                -1, 0, 0,//4
                -1, 0, 0,//3
                -1, 0, 0,//7
                -1, 0, 0,//3
                -1, 0, 0,//2

                // v7-v4-v3-v2 bottom
                0, -1, 0,//1
                0, -1, 0,//6
                0, -1, 0,//7
                0, -1, 0,//1
                0, -1, 0,//7
                0, -1, 0,//2

                // v4-v7-v6-v5 back
                0, 0, -1,//4
                0, 0, -1,//7
                0, 0, -1,//6
                0, 0, -1,//4
                0, 0, -1,//6
                0, 0, -1,//5
            ];
            gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
        }

        function setupEvent(){
            document.addEventListener("keydown", onkeyEvent);
            cavans.addEventListener("mousedown", onMouseEvent('in'));
            cavans.addEventListener("mousemove", onMouseEvent('move'));
            cavans.addEventListener("mouseup", onMouseEvent('out'));
            cavans.addEventListener("mouseout", onMouseEvent('out'));
        }

        function onkeyEvent(ev){
            switch (ev.keyCode) {
                case 87:
                    moveForward(0.1);
                    break;
                case 83:
                    moveForward(-0.1);
                    break;
                case 65:
                    moveRight(-0.1);
                    break;
                case 68:
                    moveRight(0.1);
                    break;
                case 81:
                    moveUp(0.1);
                    break;
                case 69:
                    moveUp(-0.1);
                    break;
                case 90:
                    turn(0.1);
                    break;
                case 88:
                    turn(-0.1);
                    break;
                default:
                    return;
            }
        }

        function moveForward(val){
            cameraTranslation = m4.addVectors(cameraTranslation, vecMuliNum(cameraTarget, val));
            //console.log(cameraTranslation)
        }

        function moveUp(val){
            cameraTranslation = m4.addVectors(cameraTranslation, vecMuliNum(cameraUp, val));
            //console.log(cameraTranslation)
        }

        function moveRight(val){
            //根据 target 和 up 叉积出出 x 向量; 标准化，只需要方向
            var xVector = m4.cross(m4.normalize(cameraTarget), m4.normalize(cameraUp));
            cameraTranslation = m4.addVectors(cameraTranslation, vecMuliNum(xVector, val));
            //console.log(cameraTranslation);
        }

        function turn(val){
            modelRotation[1] += val * 10;
        }

        var lastMouseXY = [];
        var pitch = 0.0;
        var yaw = 90.0;
        var mouseFirstInCanvas = false;

        function onMouseEvent(type){
            switch (type) {
                case 'in':
                    return function (ev){
                        //console.log("start.")
                        //鼠标距离最左边
                        var mX = ev.clientX;
                        var mY = ev.clientY;
                        lastMouseXY[0] = mX;
                        lastMouseXY[1] = mY;
                        mouseFirstInCanvas = true;
                    }
                    break;
                case 'move':
                    return function (ev){
                        if(!mouseFirstInCanvas){
                            return false;
                        }
                        //鼠标距离最左边
                        var mX = ev.clientX;
                        var mY = ev.clientY;

                        //x方向偏移量
                        var xOffset = mX - lastMouseXY[0];
                        var yOffset = mY - lastMouseXY[1];

                        //console.log(xOffset + "," + yOffset);
                        //document.getElementById("showMouseXY").innerText = "当前鼠标坐标：" + mX + "," + mY;

                        // yaw 围绕 y轴， 偏航角
                        // pitch 围绕x轴，俯仰角
                        // roll 围绕z轴，翻滚角
                        pitch += yOffset * 0.1;
                        yaw += xOffset * 0.1;
                        /*if(pitch >= 90.0){
                            pitch = 90.0;
                        }
                        if(pitch <= -90.0){
                            pitch = -90.0;
                        }*/
                        cameraTarget[0] = Math.cos(degToRad(yaw)) * Math.cos(degToRad(pitch));
                        cameraTarget[1] = Math.sin(degToRad(pitch));

                        lastMouseXY[0] = mX;
                        lastMouseXY[1] = mY;
                    }
                    break;
                case 'out':
                    return function (ev){
                        //console.log("end.")
                        //鼠标距离最左边
                        var mX = ev.clientX;
                        var mY = ev.clientY;
                        lastMouseXY[0] = mX;
                        lastMouseXY[1] = mY;
                        mouseFirstInCanvas = false;
                    }
                    break;
                default:
                    return;
            }
        }


        function setupUI(){
            webglUtils.resizeCanvasToDisplaySize(gl.canvas);
            webglLessonsUI.setupSlider("#u_ambientIntensity", {value: ambientIntensity * 10.0, slide: updateAmbientIntensity, min: 0.0, max:100 ,step:0.01});
            webglLessonsUI.setupSlider("#u_lightIntensity", {value: lightIntensity * 10.0, slide: updateLightIntensity, min: 0.0, max:100 ,step:0.01});
            webglLessonsUI.setupSlider("#u_specularIntensity", {value: specularIntensity * 10.0, slide: updateSpecularIntensity, min: 0.0, max:100 ,step:0.01});
            webglLessonsUI.setupSlider("#specularPowParam", {value: specularPowParam * 10.0, slide: updateSpecularPowParam, min: 0.0, max:1000 ,step:0.01});
            webglLessonsUI.setupSlider("#lightX", {value: pointLightTranslation[0], slide: updateLightHeight(0), min: -100, max:100 ,step:0.01});
            webglLessonsUI.setupSlider("#lightY", {value: pointLightTranslation[1], slide: updateLightHeight(1), min: -100, max:100 ,step:0.01});
            webglLessonsUI.setupSlider("#lightZ", {value: pointLightTranslation[2], slide: updateLightHeight(2), min: -100, max:100 ,step:0.01});
        }

        function updateAmbientIntensity(ev, ui){
            ambientIntensity = ui.value / 10.0;
        }

        function updateLightIntensity(ev, ui){
            lightIntensity = ui.value / 10.0;
        }

        function updateSpecularIntensity(ev, ui){
            specularIntensity = ui.value / 10.0;
        }

        function updateSpecularPowParam(ev, ui){
            specularPowParam = ui.value / 10.0;
        }

        function updateLightHeight(index){
            return function (ev, ui) {
                pointLightTranslation[index] = ui.value;
            }
        }
    }

    function degToRad(d){
        return d * Math.PI / 180;
    }

    function radToDeg(r) {
        return r * 180 / Math.PI;
    }

    /**
     * 向量 * 标量
     * @param v1
     * @param num
     * @returns {*[]}
     * @constructor
     */
    function vecMuliNum(v1, num){
        var res = [];
        for(var i = 0; i < v1.length; i++){
            res[i] = v1[i] * num;
        }
        return res;
    }
</script>
</html>














